<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css" />

</head>
<body>
    <div id="map" style="width:800px;height:600px;border:1px solid black;"></div>
    <script>

        //import WMTS from 'ol/source/WMTS.js';
        //import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
        //
        //import {get as getProjection} from 'ol/proj.js';
        //import {getTopLeft, getWidth} from 'ol/extent.js';

const projection = ol.proj.get('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;
}


        
    const map = new ol.Map({
        target: 'map',
        layers: [
            
            new ol.layer.Tile({
                maxZoom: 14,
                source: new ol.source.WMTS({
                    attributions:
                    '1',
                    url: 'http://localhost:8881/burnbuffer/wmts/',
                    layer: 'clip',
                    matrixSet: 'ms_14',
                    format: 'image/png',
                    projection: projection,
                    tileGrid: new ol.tilegrid.WMTS({
                        origin: ol.extent.getTopLeft(projectionExtent),
                        resolutions: resolutions,
                        matrixIds: matrixIds,
                    }),
                    style: 'default',
                    wrapX: false,
                }),
            }),


    ],
        view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 2,
        }),
    });
    //https://hefeng-tiles0.qweather.net/inherit/0.4/4/8/7.png

            // new ol.layer.Tile({
            // source: new ol.source.XYZ({
            // url:
            //   'https://hefeng-tiles0.qweather.net/inherit/0.4/{z}/{x}/{y}.png',
            // }),
            // }),

    </script>



</body>
</html>